<template>
  <div class="order-page">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <div class="nav-header" @click="goHome">返回首页</div>
      <hr class="sidebar-divider" />
      <ul class="nav-list">
        <li
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          {{ tab.label }}
        </li>
      </ul>
    </aside>
    <!-- 右侧内容区域 -->
    <main class="content">
      <h2>{{ tabs[activeTab].label }}</h2>
      <!-- 火车票订单 -->
      <div v-if="activeTab === 0">
        <template v-if="trainOrders.length > 0">
          <OrderCard
            v-for="(order, index) in trainOrders"
            :key="index"
            v-bind="order"
            :userName="username"
            @refundSuccess="handleRefundSuccess"
          />
        </template>
        <p v-else class="no-orders">暂未有任何订单</p>
      </div>
      <!-- 火车餐订单 -->
      <div v-if="activeTab === 1">
        <template v-if="trainMealOrders.length > 0">
          <TrainMealOrderCard
            v-for="order in trainMealOrders"
            :key="order.orderId"
            :order="order"
          />
        </template>
        <p v-else class="no-orders">暂未有任何火车餐订单</p>
      </div>
      <!-- 酒店订单 -->
      <div v-if="activeTab === 2">
        <template v-if="hotelOrders.length > 0">
          <HotelOrderCard
            v-for="order in hotelOrders"
            :key="order.orderId"
            :order="order"
            @cancelSuccess="handleCancelSuccess"
          />
        </template>
        <p v-else class="no-orders">暂无酒店订单</p>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/utils/api'
import OrderCard from '@/components/TrainOrderCard.vue'
import type { TrainOrderDTO } from '@/types/trainOrder'
import TrainMealOrderCard from '@/components/TrainMealOrderCard.vue'
import HotelOrderCard from '@/components/HotelOrderCard.vue'
import type { HotelOrder } from '@/types/hotel'

interface TrainMealOrder {
  orderId: number
  orderNumber: string
  status: string
  createTime: string
  seatNumber: string
  totalAmount: number
}

const activeTab = ref(0)
const tabs = [{ label: '火车票订单' }, { label: '火车餐订单' }, { label: '酒店订单' }]
const goHome = () => {
  // 替换为你的首页路由跳转逻辑
  window.location.href = '/home'
}
const route = useRoute()
const username = ref((route.query.username as string) || '') // 获取 username 参数
const trainOrders = ref<TrainOrderDTO[]>([])
const trainMealOrders = ref<TrainMealOrder[]>([])
const hotelOrders = ref<HotelOrder[]>([])

const fetchTrainOrders = async () => {
  if (!username.value) return
  try {
    const res = await api.get('/api/orders/user/' + username.value + '/summary')
    trainOrders.value = res.data
  } catch (error) {
    console.error('获取火车票订单失败', error)
  }
}
const fetchTrainMealOrders = async () => {
  if (!username.value) return
  try {
    const res = await api.get('/api/orders/user/' + username.value + '/train-meals')
    trainMealOrders.value = res.data
  } catch (error) {
    console.error('获取火车餐订单失败', error)
  }
}
const fetchHotelOrders = async () => {
  if (!username.value) return
  try {
    // 使用用户名查询酒店订单
    const res = await api.get(`/api/orders/user/${username.value}/hotels`)
    hotelOrders.value = res.data
  } catch (error) {
    console.error('获取酒店订单失败', error)
  }
}
//退订酒店
const handleCancelSuccess = (orderId: number) => {
  hotelOrders.value = hotelOrders.value.filter((o) => o.orderId !== orderId)
  fetchHotelOrders()
}

// 初次加载获取火车票订单
onMounted(() => {
  if (activeTab.value === 0) {
    fetchTrainOrders()
  } else if (activeTab.value === 1) {
    fetchTrainMealOrders()
  } else if (activeTab.value === 2) fetchHotelOrders()
})
// 监听 tab 切换，点击"火车票订单"时重新获取
watch(activeTab, (newVal) => {
  if (newVal === 0) {
    fetchTrainOrders()
  } else if (newVal === 1) {
    fetchTrainMealOrders()
  } else if (newVal === 2) fetchHotelOrders()
})
//退票后刷新列表状态
const handleRefundSuccess = () => {
  // 这里退票成功后你可以刷新订单列表
  // 简单做法是重新请求数据：
  fetchTrainOrders()
  // 或者在 trainOrders 里删除已退票订单：
  // trainOrders.value = trainOrders.value.filter(o => o.orderId !== orderId)
}
</script>

<style scoped>
.order-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden; /* 防止整体页面滚动 */
}

/* 分割线 */
/* 左侧导航栏 */
.sidebar {
  width: 160px;
  background-color: #0086f6;
  color: white;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* 防止收缩 */
  height: 100vh; /* 固定高度占满视口 */
  position: sticky; /* 或 fixed 也可 */
  top: 0;
  overflow-y: auto; /* 如果导航项很多，也允许自己内部滚动 */
}
/* 顶部标题 */
.sidebar h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
}
/* 返回首页 */
.nav-header {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  cursor: pointer;
  color: white;
  text-align: center;
  transition: opacity 0.3s;
}
.nav-header:hover {
  opacity: 0.8;
}
/* 分隔线样式 */
.sidebar-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  margin: 12px 0 16px;
}
/* 列表样式 */
.nav-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 统一分隔间距 */
}
.nav-list li {
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: white;
  position: relative;
  background-color: transparent;
  border: none; /* 移除旧的分割线 */
}
.nav-list li:last-child {
  border-bottom: none;
}
/* 去除 li+li 的边框和 margin，使用统一 margin */
.nav-list li + li {
  border-top: none;
  margin-top: 0;
  padding-top: 10px;
}
/* 激活态 */
.nav-list li.active {
  background-color: rgba(255, 255, 255, 0.25);
  font-weight: bold;
}
/* 悬浮态（背景不贴上下边缘） */
.nav-list li:hover {
  background-color: rgba(255, 255, 255, 0.15);
  padding-left: 18px; /* 微调，使 hover 背景更有呼吸感 */
}

/* 右侧内容 */
.content {
  flex: 1;
  padding: 40px;
  background-color: #f9fafb;
  overflow-y: auto;
  height: 90vh; /* 与左侧高度一致 */
}
.content h2 {
  margin-bottom: 24px;
  color: #007bff;
  font-size: 22px;
  font-weight: 600;
}
/*没订单时样式*/
.no-orders {
  text-align: left;
  color: #999;
  margin-top: 2rem;
  font-size: 1.1rem;
}
</style>
